<template>
    <!-- 设置只有一张图片或两张的文章 -->
    <div class="postItem1">
        <div v-if="leftOfRight" class="leftOfRight">
            <div class="leftContent">
                <img :src="articleItem.images[0]"/>
                <div class="leftSanjiao"></div>
            </div>
            <div class="rigtContent">
                <h3>
                    {{ articleItem.title }}
                </h3>
                {{ content.length }}
                <div class="articleContent">
                    <div v-html="content"></div>
                </div>
                <div class="otherDetails">
                    <span style="font-size: 16px;display: inline-block; margin-bottom:5px; font-weight:700">
                        <i class="el-icon-place"></i>&nbsp;{{ articleItem.cityName }} 
                    </span>
                    <br/>
                    <span>
                        作者：{{ articleItem.account.nickname }}
                        <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" class="articleIcon">
                        &nbsp;
                    </span>
                    <span>
                        <i class="el-icon-view"></i>
                        {{ articleItem.watch ? articleItem.watch : 0 }}
                    </span>
                    &nbsp;
                    <span style="vertical-align: bottom;">
                        <i class="iconfont iconxiaolianwawa" style="color:red"></i>
                        {{ articleItem.like ? articleItem.like : 0 }}
                    </span>
                </div>
                <div class="rightSanjiao"/>
            </div>
        </div>
        <div v-else class="leftOfRight">
            <div class="rigtContent">
                <h3>
                    {{ articleItem.title }}
                </h3>
                <div class="articleContent">
                    <div v-html="content"></div>
                </div>
                <div class="otherDetails">
                    <span style="font-size: 16px;display: inline-block; margin-bottom:5px; font-weight:700">
                        <i class="el-icon-place"></i>&nbsp;{{ articleItem.cityName }} 
                    </span>
                    <br/>
                    <span>
                        作者：{{ articleItem.account.nickname }}
                        <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" class="articleIcon">
                        &nbsp;
                    </span>
                    <span>
                        <i class="el-icon-view"></i>
                        {{ articleItem.watch ? articleItem.watch : 0 }}
                    </span>
                    &nbsp;
                    <span style="vertical-align: bottom;">
                        <i class="iconfont iconxiaolianwawa" style="color:red"></i>
                        {{ articleItem.like ? articleItem.like : 0 }}
                    </span>
                </div>
                <div class="rightSanjiao"/>
            </div>
            <div class="leftContent">
                <img :src="articleItem.images[0]"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            content: ''
        }
    },
    props: {
        articleItem: {
            type: Object,
            default: {}
        },
        leftOfRight: {
            type: Boolean,
            default: true
        }
    },
    mounted(){
         this.content = this.articleItem.content.replace(/<img[^>]*>/g, "");
    }
}
</script>

<style scoped lang="less">
    .postItem1{
        .leftOfRight{
            width: 100%;
            display: flex;
            .leftContent{
                flex:  0 0 45%;
                height: 250px;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .leftSanjiao{
                    position: absolute;
                    content: '';
                    width: 0;
                    height: 0;
                    border-left: 0px solid transparent;
                    border-right: 25px solid white;
                    border-bottom: 15px solid transparent;
                    border-top: 15px solid transparent;
                    top: 50%;
                    margin-top: -10px;
                    left: 92%;
                    z-index: 1;
                }
            }
            .rigtContent{
                flex: 1;
                flex-direction: column;
                height: 250px;
                position: relative;
                padding: 20px;
                box-sizing: border-box;
                text-align: center;
                display: flex;
                justify-content: space-between;
                h3{
                    width: 100%;
                    font-size: 18px;
                    color: #5e5a5a;
                    transition: all .3s ease-in-out;
                    cursor: pointer;
                }
                h3:hover{
                    color: darkred;
                }
                .articleContent{
                    height: 53%;
                    margin-top: 10px;
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                }
                .otherDetails{
                    color: gray;
                    font-size: 13px;
                    text-align: right;
                    margin-left: 10px;
                    .articleIcon{
                        width: 20px;
                        height: 20px;
                        border-radius: 100px;
                        vertical-align: top;
                    }
                }
                .rightSanjiao{
                    position: absolute;
                    content: '';
                    width: 0;
                    height: 0;
                    border-left: 20px solid white;
                    border-right: 0px solid transparent;
                    border-bottom: 15px solid transparent;
                    border-top: 15px solid transparent;
                    top: 50%;
                    margin-top: -15px;
                    left: 100%;
                    z-index: 1;
                }
            }
        }
    }
</style>